<template>
  <div v-if="lefBoxAuth">
    <transition name="moveL1">
      <div>
        <div v-show="isVisible" ref="ref_container" class="container">
          <div v-if="!isShowExternalVideo" class="title_wrap">
            <div class="titleText">
              <div
                class="t"
                :class="{ active: moduleIndex == 1 }"
                v-if="data_stats_query_auth"
                @click="changeModule(1)"
              >
                数据统计
              </div>
              <div
                class="t"
                :class="{ active: moduleIndex == 2 }"
                v-if="msm_query_auth"
                @click="changeModule(2)"
              >
                多屏监控
              </div>
              <div
                class="t"
                :class="{ active: moduleIndex == 3 }"
                v-if="airline_schedule_query_auth"
                @click="changeModule(3)"
              >
                航线排期
              </div>
            </div>
            <div class="t icon" @click="isShowModule(false)">
              <svg-icon icon-class="shousuo_L" />
            </div>
          </div>
          <div
            ref="ref_box"
            class="box"
            :class="{ box_background: !isShowExternalVideo }"
          >
            <View1 v-if="moduleIndex == 1" @showCensusInfo="showCensusInfo" />
            <View2 v-if="moduleIndex == 2" />
            <View3 v-if="moduleIndex == 3" />
          </div>
        </div>
        <div
          v-show="!isVisible"
          class="showbtn icon"
          @click="isShowModule(true)"
        >
          <svg-icon icon-class="shousuo_R" />
        </div>
      </div>
    </transition>
    <div class="dialogBox">
      <el-dialog
        class="dialogVisibleBox"
        :visible.sync="censusVisible"
        width="calc(100%)"
        :modal-append-to-body="false"
      >
        <CensusInfo ref="censusinfo" :input-date="view1_date" />
      </el-dialog>
    </div>
    <div class="dialogBox">
      <el-dialog
        class="dialogVisibleBox"
        :visible.sync="eventVisible"
        width="calc(100%)"
      >
        <EventInfo
          ref="eventinfo"
          :selectTypeNum="selectTypeNum"
          :input-date="view1_date"
        ></EventInfo>
      </el-dialog>
    </div>
    <div class="dialogBox">
      <el-dialog
        class="dialogVisibleBox"
        :visible.sync="resultVisible"
        width="calc(100%)"
      >
        <DataResultInfo
          ref="resultinfo"
          :input-date="view1_date"
        ></DataResultInfo>
      </el-dialog>
    </div>

    <!-- <div class="dialogBox">
      <el-dialog
        class="dialogVisibleBox"
        :visible.sync="resultVisible"
        width="calc(100%)"
      >
        <DataResultInfo
          ref="resultinfo"
        ></DataResultInfo>
      </el-dialog>
    </div> -->
  </div>
</template>

<script>
import View1 from "./tab-views/view1.vue";
import View2 from "./tab-views/view2.vue";
import View3 from "./tab-views/view3.vue";
import CensusInfo from "./tab-views/ltconmponents/censusinfo.vue";
import EventInfo from "./tab-views/ltconmponents/eventinfo.vue";
import DataResultInfo from "./tab-views/ltconmponents/dataresultinfo.vue";
import { getselfNestInfo } from "@/api/kanban";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "Left",
  data() {
    return {
      moduleIndex: 1,
      isVisible: true,
      censusVisible: false,
      eventVisible: false,
      resultVisible: false,
      nestCodeList: [],
      isShowExternalVideo: false,
      selectTypeNum: 1,
      loading: null,
      currentVisible: null,
      view1_date: null,

      userAuthor: null,
    };
  },
  computed: {
    // 数据统计显示权限
    data_stats_query_auth() {
      return this.userAuthor?.data_stats?.query?.have_auth;
    },
    // 多屏监控显示权限
    msm_query_auth() {
      return this.userAuthor?.msm?.query?.have_auth;
    },
    // 航线排期显示权限
    airline_schedule_query_auth() {
      return this.userAuthor?.airline_schedule?.query?.have_auth;
    },
    // 左侧看板栏显示
    lefBoxAuth() {
      return (
        this.data_stats_query_auth ||
        this.msm_query_auth ||
        this.airline_schedule_query_auth
      );
    },
  },
  components: {
    View1,
    View2,
    View3,
    CensusInfo,
    EventInfo,
    DataResultInfo,
  },

  created() {
    // wkl change 重复调用接口
    // this.setNestCodeList();
    var that = this;
    that.userAuthor = that.$store.getters.userAuth;
    that.$bus.on("external_multi_video", (data) => {
      that.isShowExternalVideo = data;
    });
    that.$bus.on("view1_dateChange", (date) => {
      that.view1_date = date;
    });
  },
  mounted() {
    this.initData();
    this.initBus();
  },
  methods: {
    initData() {
      if (!this.data_stats_query_auth) {
        this.moduleIndex = 2;
        if (!this.msm_query_auth) {
          this.moduleIndex = 3;
        }
      }

      let option = this.$store.getters.kanBanConfig;
      if (!option.option) {
        return;
      }
      let find = option.option.find((feature) => {
        return feature.position === "left";
      });

      this.$nextTick(() => {
        if (!!find) {
          if (find.status === 2) {
            this.isVisible = true;
          } else {
            this.isVisible = false;
          }

          switch (find.feature) {
            case "data_stats":
              if (this.data_stats_query_auth) {
                this.moduleIndex = 1;
              } else {
                if (this.msm_query_auth) {
                  this.moduleIndex = 2;
                } else {
                  this.moduleIndex = 3;
                }
              }
              break;
            case "msm":
              if (this.msm_query_auth) {
                this.moduleIndex = 2;
              } else {
                if (this.data_stats_query_auth) {
                  this.moduleIndex = 1;
                } else {
                  this.moduleIndex = 3;
                }
              }
              break;
            case "airline_schedule":
              if (this.airline_schedule_query_auth) {
                this.moduleIndex = 3;
              } else {
                if (this.data_stats_query_auth) {
                  this.moduleIndex = 1;
                } else {
                  this.moduleIndex = 2;
                }
              }
              break;
            default:
              break;
          }
        } else {
          this.isVisible = true;
        }
      });
    },
    initBus() {
      // 关闭窗口
      this.$bus.on("CloseLeftWindow", (data) => {
        console.log(data);
        this.isShowModule(data);
        // if (this.$refs.ref_view3) {
        //   this.$refs.ref_view3.clearMap()
        // }
      });
      this.$bus.on("ClearView3Map", (data) => {
        // if (this.$refs.ref_view3) {
        //   this.$refs.ref_view3.clearMap()
        // }
      });
    },
    removeBus() {
      this.$bus.off("CloseLeftWindow");
      this.$bus.off("ClearView3Map");
      this.$bus.off("view1_dateChange");
    },
    // setNestCodeList() {
    //   var _this = this;
    //   getselfNestInfo({}).then((res) => {
    //     var list = res.data;
    //     var newnesarr = [];
    //     list.forEach((item, index) => {
    //       newnesarr.push(item.nest_code);
    //     });
    //     _this.nestCodeList = newnesarr;
    //     _this.$store.commit("SAVE_SELF_NEST_LIST", _this.nestCodeList);
    //   });
    // },
    showCensusInfo(data) {
      var _this = this;
      if (!this.userAuthor?.data_stats?.query_detail?.have_auth) return;

      _this.currentVisible = data;
      if (_this.currentVisible == 1) {
        this.censusVisible = true;
      } else if (_this.currentVisible == 2) {
        this.eventVisible = true;

        this.selectTypeNum = 1;
      } else if (_this.currentVisible == 4) {
        this.eventVisible = true;
        this.selectTypeNum = 2;
      } else if (_this.currentVisible == 3) {
        this.resultVisible = true;
      }
    },

    isShowModule(val) {
      this.isVisible = val;
      if (val) {
        this.$bus.emit("showLeftKanban");
      } else {
        this.$bus.emit("hiddenLeftKanban");
      }
    },
    changeModule(val) {
      if (this.moduleIndex !== val) {
        this.moduleIndex = val;
      }
    },
  },
  watch: {
    isShowExternalVideo(newVal, oldVal) {
      if (newVal === oldVal) return;
      if (newVal) {
        // todo 展开页面
        console.log("ref_container", this.$refs.ref_container);
        // 拿到总宽度 -330
        this.$refs.ref_box.style.width = window.innerWidth - 400 + "px";
        // this.$refs.ref_box.style.height = 'vh(1400)'
        // todo 重新 设置背景!!!!
        // this.$refs.ref_box.style.backgroundImage = 'none'
      } else {
        // 缩小页面
        // this.$refs.ref_box.style.backgroundImage = 'url("~@/assets/z2.png")'
        this.$refs.ref_box.style.width = "330px";
      }
    },
  },
  beforeDestroy() {
    this.removeBus();
  },
};
</script>

<style scoped lang="scss">
.moveL1-enter-active,
.moveL1-leave-active {
  transition: all 0.5s ease;
  transform: translateX(0);
}

.moveL1-enter,
.moveL1-leave {
  transform: translateX(-300%);
}

.moveL1-leave-to {
  transform: translateX(-300%);
}

.showbtn {
  position: absolute;
  top: 70px;
  left: 10px;
  height: 30px;
  width: 30px;
  background: rgba(15, 57, 102, 0.8);
  padding: 0 5px;
  border: 1px solid rgba(28, 193, 255, 0.6);
  font-size: 18px;
  line-height: 30px;
  color: #f4f4f5;
  cursor: pointer;
  z-index: 100;
}

.container {
  position: absolute;
  top: vh(60);
  left: 20px;
  height: vh(1000);
  transition: all 0.5s;
  z-index: 1000;
  box-sizing: border-box;
  width: 330px;
  transition: 0.2s cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  caret-color: transparent;
  .title_wrap {
    background-image: url("~@/assets/top_bg.png");
    height: vh(36);
    line-height: vh(20);
    padding: 0 vw(20);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid rgba(28, 193, 255, 0.2);
    .t {
      margin-top: 10px;
      color: rgba(227, 227, 227, 0.8);
      cursor: pointer;

      &.active {
        color: #fff;
        font-size: 15px;
      }
    }

    .titleText {
      display: flex;
      justify-content: space-evenly;
      flex: 1;
    }
    .icon {
      font-size: vh(20);
      width: 10px;
    }
  }

  .box {
    position: relative;
    background: rgba(5, 29, 40, 0.8);
    margin-top: -1px;
    border: 1px solid rgba(28, 193, 255, 0.2);
    flex: 1;
    height: 0;
    width: 100%;
    box-shadow: 0 0 vh(15) rgba(28, 193, 255, 0.4) inset;
  }

  .box_background {
    background-image: url("~@/assets/z2.png");
    background-size: 100% vh(60);
    background-repeat: no-repeat;
    background-position: 0 vh(905);
  }
}

.dialogVisibleBox {
  padding-left: 380px;
  padding-right: 15px;
  padding-top: vh(70);
  height: 99%;
  overflow: hidden;
}

.dialogVisibleBox::v-deep {
  .el-dialog {
    margin-top: 0 !important;
    height: 100%;
    background: rgba(0, 6, 49, 0.95);
    border: 1px solid #797979;

    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0 5px 15px 15px;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
